<script setup lang="ts">
import useHookRouter from "@/hooks/router";
const { $router } = useHookRouter();

import useUserStore from "@/pinia/user";
const useStore = useUserStore();

const options = [{ name: "退出登录", code: "logout" }] as const;

// 从 options 中，获取 code 的值作为类型
type CommandType = (typeof options)[number]["code"];
// 设置 handlerObj 的类型
type handlerObjType = {
  [key in CommandType]: any;
};

const onCommand = (command: CommandType) => {
  const handlerObj: handlerObjType = {
    logout: onLogout,
  };

  handlerObj[command] && handlerObj[command]();
};

const onLogout = () => {
  $router.push({
    name: "Logout",
  });
};
</script>

<template>
  <div class="user-info-container">
    <span class="mr-[4px]">
      {{ useStore.userInfo?.name }}
    </span>
    <xt-dropdown :options="options" @command="onCommand">
      <xt-avatar :size="60" />
    </xt-dropdown>
  </div>
</template>

<style lang="scss" scoped></style>
